<template>
    <div class="rig">
        <span>
            <p>
                <strong @click="onTab(0)" :class="curIndex==0?'rig-on':''">我的求购</strong>
                <strong @click="onTab(1)" :class="curIndex==1?'rig-on':''">我的媒体</strong>
            </p>
            <p>
                <router-link to="/gxzd/buy">
                    <strong>发布求购</strong>
                </router-link>
                <router-link to="/gxzd/sell">
                    <strong>发布媒体</strong>
                </router-link>
            </p>
        </span>
        <div v-if="curIndex==1">
            <div class="hu-2" v-if="qiugouList.length>0">
                <router-link
                    :to="{path:'/gxzd/huwai/dec',query:{data:JSON.stringify(item) }}"
                    v-for="(item,index) in newsList "
                    :key="index"
                >
                    <p>
                        <strong>{{item.area.match(/-(\S*)-(\S*)/)[1]}}</strong>
                        ·
                        <strong>{{item.title}}</strong>
                    </p>
                    <div>
                        <img :src="prefixUrl+item.img1.split(',')[0]" alt />
                        <div>
                            <p>
                                <strong>公司名称：</strong>
                                <strong>{{item.company}}</strong>
                            </p>
                            <span>
                                <p>
                                    <strong>媒体类型：</strong>
                                    <strong>{{item.mediaName}}</strong>
                                </p>
                                <p>
                                    <strong>广告预算：¥</strong>
                                    <strong>{{item.budget}}</strong>
                                    <strong>万元/月</strong>
                                </p>
                            </span>
                            <p>
                                <strong>详细地址：</strong>
                                <strong>{{item.address}}</strong>
                            </p>
                            <p>
                                <strong>广告咨询热线：</strong>
                                <strong>{{item.phone}}</strong>
                            </p>
                        </div>
                    </div>
                </router-link>
            </div>
			 <div class="hu-2" v-else>
				 <p>暂无数据</p>
			 </div>
            <div class="news-page">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="totalSum"
                    :page-size="sizeSum"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                ></el-pagination>
            </div>
        </div>
        <div v-if="curIndex==0">
            <div class="list">
                <router-link
                    :to="{path:'/gxzd/huwai/dec',query:{data:JSON.stringify(item) }}"
                    v-for="(item,index) in qiugouList"
                    :key="index"
                >
                    <p>{{item.title}}</p>
                    <p>{{item.createTime | pattime}}</p>
                </router-link>
            </div>
            <div class="news-page">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="totalSum"
                    :page-size="10"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    filters: {
        pattime(value) {
            return value.slice(0, 10)
        }
    },
    data() {
        return {
            prefixUrl: '',
            curIndex: 0,
            totalSum: 0,
            sizeSum: 5,
            newsList: [],
            qiugouList: []
        }
    },
    created() {
        this.prefixUrl = this.$store.state.user.imgUrl
        this.getPageSupplyDemand(0, 1)
    },
    methods: {
        async getPageSupplyDemand(type, curIndex) {
            const data = { type: type, currentPage: curIndex, pageSize: 5, mediaName: this.mediaName }
            const res = await this.$store.dispatch('access/getPageSupplyDemand', data)
            if (type == 0) {
                this.qiugouList = res.list
            }
            else {
                this.newsList = res.list
            }
            this.totalSum = res.totalCount
            console.log(res)
        },
        onTab(index) {
            this.curIndex = index
            this.getPageSupplyDemand(index, 1)
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(val);
            this.getPageSupplyDemand(this.curIndex, val)
        },
    }
}
</script>

<style scoped>
.hu-2 >P{
	line-height: 55px;
	text-align: center;
}
.news-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #c02636;
}
.rig > span {
    display: flex;
    justify-content: space-between;
    height: 50px;
    align-items: center;

    border-bottom: 1px solid #ddd;
}
.rig > span p:nth-child(1) strong {
    font-size: 18px;
    font-weight: 500;
    margin-right: 30px;
    cursor: pointer;
}

.rig-on {
    color: #c02636;
}
.rig > span p:nth-child(2) {
    display: flex;
    align-items: center;
}
.rig > span p:nth-child(2) strong {
    margin-left: 20px;
    background-color: rgb(55, 31, 117);
    color: #fff;
    width: 80px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    display: block;
}

.rig > h1 {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #c02636;
    font-weight: 500;
    border-bottom: 1px solid #ddd;
}

.list {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    height: 310px;
}
.list a {
    display: flex;
    padding: 8px 0;
}
.list a p {
    font-size: 15px;
}
.list a p:nth-child(2) {
    color: #999;
}
.list a p:nth-child(1) {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    padding-left: 15px;
    position: relative;
    padding-right: 80px;
}
.list a p:nth-child(1)::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    left: 0;
    top: 7px;
    background-color: #999;
}

.hu-2 a {
    padding: 20px 0;
    display: block;
    border-bottom: 1px dashed #ddd;
}

.hu-2 a > p {
    background-color: rgb(239, 244, 247);
    height: 35px;
    line-height: 35px;
    font-size: 16px;
    padding: 0 10px;
}

.hu-2 a > p strong {
    font-size: 16px;
}

.hu-2 a > div {
    display: flex;
    padding-top: 10px;
}

.hu-2 a > div > div {
	padding-left: 25px;
	flex: 1;
}

.hu-2 a > div img {
    width: 200px;
    height: 130px;
    object-fit: cover;
    display: block;
}

.hu-2 a > div p {
    display: flex;
    align-items: center;
}

.hu-2 a > div > div > p:nth-of-type(1) {
    font-size: 14px;
}

.hu-2 a > div > div > p:nth-of-type(1) strong:nth-of-type(2) {
    font-weight: 500;
}

.hu-2 a > div > div span {
    display: flex;
    padding: 10px 0;
}

.hu-2 a > div > div span strong {
    font-size: 14px;
}

.hu-2 a > div > div span p:nth-of-type(1) {
   flex: 1;
}

.hu-2 a > div > div span p:nth-of-type(1) strong:nth-of-type(2) {
    font-weight: 500;
}

.hu-2 a > div > div span p:nth-of-type(2) {
    padding-left: 150px;
}

.hu-2 a > div > div span p:nth-of-type(2) strong:nth-of-type(2) {
    color: #ff6600;
    margin: 0 5px;
    font-weight: 500;
    font-size: 16px;
}

.hu-2 a > div > div p:nth-of-type(2) {
    font-size: 14px;
}

.hu-2 a > div > div p:nth-of-type(2) strong:nth-of-type(2) {
    font-weight: 500;
}

.hu-2 a > div > div p:nth-of-type(3) {
    font-size: 14px;
    padding-top: 10px;
}

.hu-2 a > div > div p:nth-of-type(3) strong:nth-of-type(2) {
    font-weight: 500;
    color: #ff6600;
    font-size: 18px;
}
</style>